<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <link rel="stylesheet" href="public.css">
    <style>
        .border {
            border: solid 5px black;
        }

        /* 圆角 */
        .border-radius {
            border-radius: 50%;
        }

        /* 边框图片 */
        .borderimagebox {
            width: 200px;
            height: 200px;
            border: 30px solid greenyellow;
        }

        .borderstyle1 {
            border: solid 20px #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 5px #888888;
            border-image: url(./images/border.png) 30 round;
        }
    </style>
</head>

<body>
    <h4>1、盒子边框</h4>
    <div class="all-center" style="justify-content: start;">

        <div class="box">圆角：border-radius</div>
        <div class="box border">直角边框</div>
        <div class="box border border-radius">圆角 50%</div>
        <div class="box border" style="border-radius: 10px;">圆角10px</div>
        <div class="box border" style="border-radius: 20px / 40px;">20px/40px</div>
        <div class="box border" style="border-radius: 80% / 20%;"> 80% / 20%</div>
        <div class="box border" style="border-radius: 10px/20px 50%;">10px/20px 50%</div>
        <div class="box border" style="border-radius: 40px 20px 30% 5px;">40px 20px 30% 5px</div>
        <div class="box border" style="border-radius: 40px 20px 30% 5px / 20px 40px 60% 12px; font-size: 4px;"> 40px
            20px 30% 5px / 20px 40px 60% 12px</div>

    </div>

    <h4>2、盒子阴影</h4>

    <h6>box-shadow: h-shadow v-shadow blur spread color inset;</h6>
    <p>h-shadow 必需的。水平阴影的位置。允许负值</p>
    <p>v-shadow 必需的。垂直阴影的位置。允许负值</p>
    <p>blur 可选。模糊距离</p>
    <p>spread 可选。阴影的大小</p>
    <p>color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表</p>
    <p>inset 可选。从外层的阴影（开始时）改变阴影内侧阴影</p>
    <div class="all-center" style="margin-top: 20px; justify-content: start;">

        <div class="box">盒子阴影：box-shadow</div>
        <div class="box" style="box-shadow: 10px 10px 5px #888888;">10px 10px 5px #888888</div>
        <div class="box" style="box-shadow: -5px -10px 5px #888888;">-5px -10px 5px #888888</div>
        <div class="box" style="box-shadow: 10px 10px 20px #888888;">10px 10px 20px #888888</div>
        <div class="box" style="box-shadow: 10px 10px 5px #888888 inset;">10px 10px 5px #888888 inset</div>
        <div class="box" style="box-shadow: 0 0 30px #888888 inset;">0 0 30px #888888 inset</div>
        <div class="box" style="box-shadow: 0 0 30px #888888;">0 0 30px #888888</div>
    </div>

    <h4>3、边界图片</h4>
    <h6>border-image: source slice width outset repeat|initial|inherit;</h6>
    <p>border-image-source 用于指定要用于绘制边框的图像的位置</p>
    <p>border-image-slice 图像边界向内偏移</p>
    <p>border-image-width 图像边界的宽度</p>
    <p>border-image-outset 用于指定在边框外部绘制 border-image-area 的量</p>
    <p>border-image-repeat 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。</p>
    <p>没有单位，专指像素</p>
    <div class="all-center" style="margin-top: 20px; justify-content: start;">
        <div class="box borderimagebox">边界图片：border-image
            <img src="./images/border.png" alt="" srcset="">
        </div>
        <div class="box borderimagebox" style="border-image: url('./images/border.png') 30 round;">30 round</div>
        <div class="box borderimagebox" style="border-image: url('./images/liulanqi2.png') 30 round;">30 round</div>
        <div class="box borderimagebox" style="border-image: url('./images/border.png') 30 stretch;">30 stretch</div>
        <div class="box borderimagebox" style="border-image: url('./images/border.png') 30 repeat;">30 repeat</div>
    </div>

    <h4>4、自由组合</h4>
    <div class="all-center" style="margin-top: 20px; justify-content: start;">
        <div class="box borderstyle1">1</div>
        <div class="box borderstyle1" style="border-image: url(./images/border.png) 50 round;">1</div>
        <div class="box borderstyle1" style="border-radius: 20% / 50%;">1</div>
        <div class="box borderstyle1" style="border-radius: 20% / 50%;border-image: url(./images/border.png) 50 stretch;">1</div>
        <div class="box borderstyle1" style="border-radius: 20% / 50%;border-image: url(./images/border.png) 30 stretch;">1</div>
        <div class="box borderstyle1" style="border-radius: 20% / 50%;border-image: url(./images/border.png) 10 stretch;">1</div>
        <div class="box borderstyle1" style="border-radius: 10%;border-image: url(./images/border.png) 50 100 stretch;">1</div>
        <div class="box borderstyle1" style="border-radius: 10%;border-image: url(./images/border.png) 100 repeat;">1</div>

    </div>
</body>

</html>